<template>
  <j-modal
    :title="title"
    :width="980"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">

    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row class="form-row" :gutter="24">
        </a-row>
        <a-row class="form-row" :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
          <a-col :span="24" pull="2">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              style="margin-left: -10px"
              label="网点名称">
              <a-input style="width: 123%" placeholder="请输入网点名称" v-decorator="['name',validatorRules.name]"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row class="form-row" :gutter="24">
          <a-col :span="24" pull="2">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              style="margin-left: -10px"
              label="状态">
              <j-dict-select-tag  v-decorator="[ 'status', validatorRules.status ]" placeholder="状态" :type="'radioButton'" :triggerChange="true" dictCode="store_status"/>
              <!--              <j-dict-select-tag v-decorator="[ 'status', validatorRules.status ]" placeholder="状态" :type="'radioButton'" :triggerChange="true" :options="jselectMultiple.options"/>-->
            </a-form-item>
          </a-col>
        </a-row>
        <a-row class="form-row" :gutter="24">
          <a-col :span="24" pull="2">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              style="margin-left: -10px"
              label="网点所在地">
              <a-cascader style="width: 123%" :options="areaData" :value="areaValue" @change="onChange"
                          placeholder="Please select"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row class="form-row" :gutter="24">
          <a-col :span="24" pull="2">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              style="margin-left: -10px"
              label="详细地址">
              <a-input style="width: 123%" placeholder="请输入详细地址" v-decorator="['address', {}]"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row class="form-row" :gutter="24">
          <a-col :span="12">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              style="margin-right: -35px"
              label="联系人">
              <a-input placeholder="请输入联系人" v-decorator="['linkName', {}]"/>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="联系电话">
              <a-input placeholder="请输入联系电话" v-decorator="['phone',validatorRules.phone]"/>

            </a-form-item>
          </a-col>
        </a-row>
        <a-row class="form-row" :gutter="24">
          <a-col :span="24" pull="2">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              style="margin-left: -10px"
              label="简介">
              <a-input style="width: 123%" placeholder="请输入简介" v-decorator="['intro', {}]"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row class="form-row" :gutter="24">
          <a-col :span="12">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              :hidden="hiding"
              style="margin-right: -35px"
              label="门店图片">
              <a-input placeholder="请输入门店图片" v-decorator="['entityPicture', {}]"/>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              :hidden="hiding"
              label="外部编码">
              <a-input placeholder="请输入外部编码" v-decorator="['extCode', {}]"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row class="form-row" :gutter="24">
          <a-col :span="12">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              :hidden="hiding"
              style="margin-right: -35px"
              label="饿了么编码">
              <a-input placeholder="请输入饿了么编码" v-decorator="['elemeCode', {}]"/>
            </a-form-item>
          </a-col>
        </a-row>

      </a-form>
    </a-spin>
  </j-modal>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import { ACCESS_TOKEN } from "@/store/mutation-types"
import pick from 'lodash.pick'
import moment from 'moment'
import JDictSelectTag from '../../../components/dict/JDictSelectTag'
import Vue from 'vue'
import StmReplenishmentModal from "./StmReplenishmentModal";
import StmRequiregoodsModal from "./StmRequiregoodsModal";
import StmReplenishmentExecModal from "./StmReplenishmentExecModal";
import StmReplenishmentItemModal from "./StmReplenishmentItemModal";
import StmRequiregoodsItemList from "../StmRequiregoodsItemList";
import StmReplenishmentPrintModal from "./StmReplenishmentPrintModal";

export default {
  name: 'StmStoreInfoModalV2JX',
  components: { JDictSelectTag },
  data() {
    return {
      jselectMultiple: {
        options: [
          { text: '维护中', value: '1' },
          { text: '合作中', value: '2' },
          { text: '已停用', value: '3' },
        ],
        value: 'Integer,Boolean'
      },
      title: '操作',
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      labelCol1: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol1: {
        xs: { span: 24 },
        sm: { span: 12 }
      },
      areaData: [],
      areaValue: [],
      confirmLoading: false,
      uploadLoading:false,
      uploadLogoLoading:false,
      editEnable: true,
      hiding: true,
      headers:{},
      form: this.$form.createForm(this),
      pictureUrl: "",
      storeQrCodeUrl:"",
      logoUrl: "",
      validatorRules: {
        partnerId: { rules: [{ required: true, message: '请输入商家id!' }] },
        phone: { rules: [{ required: true, message: '请输入联系电话!' }] },
        name: { rules: [{ required: true, message: '请输入经销商名称!' }] },
        storeId: { rules: [{ required: true, message: '请输入门店编号!' }] },
        status: { rules: [{ required: true, message: '请输入0-已关闭  9全面开放!' }] },
        sapAddressCode: { rules: [{ required: true, message: '请输入SAP系统的库位编号' }] }
      },
      url: {
        add: '/stm/stmStoreInfo/add',
        edit: '/stm/stmStoreInfo/edit',
        areaJson: '/data/area',
        fileUpload: window._CONFIG['domianURL']+"/sys/common/ossUpload",
        imgerver: window._CONFIG['domianURL']+"/sys/common/view",
      }
    }
  },
  created() {
    const token = Vue.ls.get(ACCESS_TOKEN);
    this.headers = {"X-Access-Token":token};
  },
  computed:{
    uploadAction:function () {
      return this.url.fileUpload;
    }
  },
  methods: {
    onCreateTimeChange: function(value, dateString) {
      console.log(dateString[0], dateString[1])
      this.queryParam.createTime_begin = dateString[0]
      this.queryParam.createTime_end = dateString[1]
    },
    add() {
      this.pictureUrl = "";
      this.logoUrl = "";
      this.storeQrCodeUrl = "";
      this.edit({})
    },
    edit(record) {
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.editEnable = true;
      /*if(this.model.id === undefined || this.model.id === null || this.model.id === '' ){
        this.editEnable = false;
      }*/
      console.log(this.editEnable);
      this.getArea()
      this.visible = true
      this.pictureUrl = this.model.picture;
      this.logoUrl = this.model.logo;
      this.storeQrCodeUrl = this.model.storeQrCode;
      this.areaValue = [this.model.provinceCode, this.model.cityCode, this.model.districtCode]
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.model, 'storeId', 'name','sapAddressCode','status', 'address', 'dayTimeStart', 'dayTimeEnd', 'longitude', 'latitude', 'intro', 'phone', 'linkName', 'entityPicture', 'extCode', 'storeType', 'replenishmentDays','elemeCode'))
        //时间格式化
        this.form.setFieldsValue({ endTime: this.model.endTime ? moment(this.model.endTime) : null })
      })

    },
    beforeUpload: function(file){
      var fileType = file.type;
      if(fileType.indexOf('image')<0){
        this.$message.warning('请上传图片');
        return false;
      }
      //TODO 验证文件大小
    },
    handleChange (info) {
      this.pictureUrl = "";
      if (info.file.status === 'uploading') {
        this.uploadLoading = true;
        return
      }
      if (info.file.status === 'done') {
        var response = info.file.response;
        this.uploadLoading = false;
        console.log(response);
        if(response.success){
          this.model.picture = response.message;
          this.pictureUrl = this.model.picture;
        }else{
          this.$message.warning(response.message);
        }
      }
    },
    handleStoreQrChange(info) {
      this.storeQrCodeUrl = "";
      if (info.file.status === 'uploading') {
        this.uploadLoading = true;
        return
      }
      if (info.file.status === 'done') {
        var response = info.file.response;
        this.uploadLoading = false;
        console.log(response);
        if(response.success){
          this.model.storeQrCode = response.message;
          this.storeQrCodeUrl = this.model.storeQrCode;
        }else{
          this.$message.warning(response.message);
        }
      }
    },
    getPictureView(){
      if(this.model.picture !== null && this.model.picture !== undefined && this.model.picture !== ''){
        if('http' === this.model.picture.substring(0,4)){
          return this.model.picture;
        }
        return this.url.imgerver +"/"+ this.model.picture;
      }
    },
    handleLogoChange (info) {
      this.logoUrl = "";
      if (info.file.status === 'uploading') {
        this.uploadLogoLoading = true;
        return
      }
      if (info.file.status === 'done') {
        var response = info.file.response;
        this.uploadLogoLoading = false;
        console.log(response);
        if(response.success){
          this.model.logo = response.message;
          this.logoUrl = this.model.logo;
        }else{
          this.$message.warning(response.message);
        }
      }
    },
    getLogoView(){
      if(this.model.logo !== null && this.model.logo !== undefined && this.model.logo !== ''){
        if('http' === this.model.logo.substring(0,4)){
          return this.model.logo;
        }
        return this.url.imgerver +"/"+ this.model.logo;
      }
    },
    getStoreQrView(){
      if(this.model.storeQrCode !== null && this.model.storeQrCode !== undefined && this.model.storeQrCode !== ''){
        if('http' === this.model.storeQrCode.substring(0,4)){
          return this.model.storeQrCode;
        }
        return this.url.imgerver +"/"+ this.model.storeQrCode;
      }
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    getArea() {
      getAction(this.url.areaJson).then((res) => {
        this.areaData = res
      })
    },
    onChange(value, selectedOptions) {
      console.log(value, selectedOptions)
      this.model.provinceCode = selectedOptions[0].value
      this.model.cityCode = selectedOptions[1].value
      this.model.districtCode = selectedOptions[2].value
      this.model.province = selectedOptions[0].label
      this.model.city = selectedOptions[1].label
      this.model.district = selectedOptions[2].label
      this.areaValue = [this.model.provinceCode, this.model.cityCode, this.model.districtCode]
    },
    handleOk() {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!this.model.id) {
            httpurl += this.url.add
            method = 'post'
          } else {
            httpurl += this.url.edit
            method = 'put'
          }
          this.model.storeType=2
          let formData = Object.assign(this.model, values)
          //时间格式化
          formData.endTime = formData.endTime ? formData.endTime.format('YYYY-MM-DD HH:mm:ss') : null
          formData.brandCategory=2;
          console.log(formData)
          httpAction(httpurl, formData, method).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
            } else {
              that.$message.warning(res.message)
            }
          }).finally(() => {
            that.confirmLoading = false
            that.close()
          })


        }
      })
    },
    handleCancel() {
      this.close()
    }


  }
}
</script>

<style lang="less" scoped>

</style>
